body {
  margin: 0;
  padding: 0;
  height: 100vh;
  /* background: linear-gradient(to bottom, #000099, #add8e6);  */
  background: linear-gradient(to bottom, #add8e6, #fff);
  background-size: 200% 200%;
  /* 创建一个比实际大的背景尺寸 */
  animation: gradient 5s ease infinite;
  overflow: hidden;
  /* 动画效果 */
}

/* 背景渐变动画 */
@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0% 50%;
  }
}

.cloudMain,
.cloudMain-item {
  display: flex;
}

.cloud {
  position: relative;
  background: #fff;
  width: 200px;
  height: 60px;
  border-radius: 200px / 100px;
  /* 椭圆的水平半径和垂直半径 */
  margin: 10px;
}

.cloud:before,
.cloud:after {
  content: '';
  position: absolute;
  background: #fff;
  width: 100px;
  height: 80px;
  border-radius: 100px / 80px;
  top: -40px;
  left: 50px;
}

.cloud:after {
  width: 120px;
  height: 120px;
  top: -50px;
  left: 100px;
}

/* 可选：添加一些阴影和动画效果 */
.cloud {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0), 0 6px 6px rgba(0, 0, 0, 0.23);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
      transform: translateY(0);
  }

  50% {
      transform: translateY(-10px);
  }

  100% {
      transform: translateY(0);
  }
}

.cloud-1 {
  width: 130px;
  height: 64px;
  top: 50%;
  /* left: 30%; */
  animation-delay: -2s;
  /* 不同的云朵有不同的动画延迟 */
}

.cloud-2 {
  width: 173px;
  height: 81px;
  top: 70%;
  /* left: 50%; */
  animation-delay: -1s;
}

.cloud-3 {
  width: 118px;
  height: 56px;
  top: 10%;
  /* left: 70%; */
}

/* 浮动动画 */
@keyframes float {
  0% {
      transform: translateY(0);
  }

  50% {
      transform: translateY(-20px);
      /* 上下浮动距离 */
  }

  100% {
      transform: translateY(0);
  }
}

/* 可选：添加一些阴影效果 */
.cloud {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.grassMain {
  position: fixed;
  bottom: -30px;
  display: flex;
}

.grassMain-item {
  display: flex;
}

.grass {
  position: relative;
  width: 5px;
  left: -10px;
  height: 200px;
  margin: 2px;
  transform: rotate(5deg);
  transform-origin: bottom left;
  border-radius: 50% 50% 0 0 / 60% 60% 40% 40%;
  background: rgb(16, 121, 16);
  animation: sway 4s ease-in-out infinite;
}

.grass::before,
.grass::after {
  content: "";
  position: absolute;
  bottom: 0;
  background: rgb(44, 155, 44);
  transform-origin: bottom left;
  border-radius: 50% 50% 0 0 / 60% 60% 40% 40%;
  box-shadow: 0 0 10px rgba(52, 170, 52, 0.5);
}

.grass::before {
  width: 100%;
  height: 70%;
  left: 0;
  transform: rotate(-10deg);
  animation: sway 8s ease-in-out infinite;
}

.grass::after {
  width: 70%;
  height: 80%;
  left: 15%;
  bottom: 10%;
  transform: rotate(10deg);
  background: rgb(31, 126, 31);
  animation: sway 12s ease-in-out infinite;
}



@keyframes sway {
  0% {
      transform: rotate(-3deg) translateY(0);
  }

  50% {
      transform: rotate(3deg) translateY(-5px);
  }

  100% {
      transform: rotate(-3deg) translateY(0);
  }
}

.grassMain-item:nth-child(2n+1) {
  transform: scale(1.1);
  margin: 0px 1px;
}

.grassMain-item:nth-child(2n) {
  transform: scale(0.9);
  margin: 0px 3px;
}

.grassMain-item:nth-child(2n+2) {
  transform: scale(1);
  margin: 0px 2px;
}

.grassMain-item:nth-child(3n+2) {
  transform: scale(0.8);
  margin: 2px 0px;
}

.grassMain-item:nth-child(2n+2) .grass::after {
  width: 120%;
}

.grassMain-item:nth-child(2n+3) .grass::before {
  width: 140%;
}